<template>
<div>
   
  <el-dialog
  title="提示"
  :visible="dialogVisible"
  @update:visible="setDialogVisible(false)"
  width="30%"
  :before-close="handleClose">
  <el-form :model="student" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="姓名" prop="studentName">
    <el-input v-model="student.studentName"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="student.age" ></el-input>
  </el-form-item>
  <el-form-item label="性别" >
    <el-radio-group v-model="student.gender">
    <el-radio label="男">男</el-radio>
    <el-radio label="女">女</el-radio>
  </el-radio-group>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="setDialogVisible(false)">取消</el-button>
  </el-form-item>
</el-form>
</el-dialog>
</div>
</template>

<script>
import {updateStudent} from '../../service'
import {mapState,mapMutations,mapActions} from 'vuex'
export default {
    data(){
        return{
            // ruleForm: {
            //     studentName: '',
            //     age: '',
            //     gender: ''
            // },
        rules: {
          studentName: [
            { required:true, trigger: 'blur' }
          ],
          age: [
            { required:true, trigger: 'blur'}
          ]
        }
        }
    },
    computed:{
      ...mapState("student",["dialogVisible","student"])
    },
    methods:{
        submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            await updateStudent(this.student);
            // this.$emit("setDialogVisible",false);
            this.setDialogVisible(false);
            // this.$emit('show');
            this.show();
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      ...mapMutations("student",["setDialogVisible"]),
      ...mapActions("student",["show"])
    }
}
</script>

<style>

</style>